<template>
<div class="backstagemain">
    <h2 class="backstageheader">活动管理</h2>
    <div class="backstagesearch">
        <div class="backstagestatus">
            <label>状态:</label>
            <select v-model="stateSelected">
                <option value="1">已通过</option>
                <option value="2">未通过</option>
                <option value="0">未审核</option>
            </select>
        </div>
        <div class="backstagestatus backstageworktype">
            <label>活动类型:</label>
            <select v-model="typeSelected">
                <option value="">未选择</option>
                <option value="8">运动会</option>
            </select>
        </div>
        <div class="schoolsearch">
            <label>活动名称:</label>
            <input v-model="name" type="text" autocomplete="off" placeholder="请输入活动名称">
        </div>
        <div class="backstagebuttons">
            <button class="backstagesearchbtn" @click="conditionSearch()">搜索</button>
            <button class="backstagenewstart" @click="searchTrends(1)">重置</button>
        </div>
    </div>
    <div class="backstagecontrol" v-show="message == 1">
        <button type="button" class="backstagedeleteall" @click="deletechoose()">删除所选</button>
        <!-- <button type="button" class="add">新增</button> -->
    </div>
    <div class="backstagetablediv" v-show="message == 1">
        <table class="backstagetable">
          <thead>
            <tr>
              <th>选择</th>
              <th>状态</th>
              <th>活动分类</th>
              <th>活动名称</th>
              <th>活动详情</th>
              <th>已报名/总名额</th>
              <th>操作</th>
            </tr>
          </thead>
            <tbody>
                <ActiveadminItem       
                  v-for="(activeObj,id) in actives" 
                  :key="id"
                  :active="activeObj"
                  :searchActives="searchActives"
                  :checkThis="checkThis"/>
            </tbody>
        </table>
    </div>
    <div class="backstagetablediv" v-show="message == 0">
        <div class="sorry">
            很抱歉，没有找到符合条件的数据
        </div>
    </div>
    <DividePage :maxsize="5"  v-show="message == 1" :changePage="changePage"  :itemLength="actives.length" :pagesizes="pagesizes"/>
</div>
</template>

<script>
import axios from 'axios'
import ActiveadminItem from './ActiveadminItem.vue'
import DividePage from '../DividePage.vue'
import {mapState} from 'vuex'
export default {
    name: 'Foodadmin',
    components:{DividePage,ActiveadminItem},
    // props:['actives'],
    data(){
        return{
            actives:[],
            workLength:0,
            pagesizes:[5,10],
            ids:[],
            stateSelected:'1',
            typeSelected:'',
            name:'',
            message:1,
            // actives:[
            //     {
            //         id:'001',
            //         status:'已审核',
            //         type:'运动会',
            //         name:'阿巴阿巴运动会',
            //         text:'阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴',
            //         need:200,
            //         number:99
            //     }
            // ],
        }
    },
    computed: {
        ...mapState({
            dialog: state => state.dialog
        })
    },
    watch:{
        dialog(){
            this.searchActives(1)
            this.$store.state.select = 1
        }
    },
    methods:{
        changePage(value){
            this.searchActives(value)
        },
        searchActives(value){
            // 请求前更新list数据
            var a = this.$store.state.select-1
            var b = this.pagesizes[a]
            axios.get(`http://123.57.251.41:8080/admin-activity/allActivities?pageNo=${value}&pageSize=${b}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                response =>{
                    console.log('请求成功了')
                    console.log(response.data.data.list)
                    this.actives = response.data.data.list
                    this.activeLength = response.data.data.total
                },
                error =>{
                    alert("请求失败了",console.log(error))
                }
            )
        },
        conditionSearch(){
            if(this.typeSelected == ''){
                if(this.name == ''){
                    axios.get(`http://123.57.251.41:8080/admin-activity/allActivities?pageNo=1&pageSize=5&state=${this.stateSelected}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                        response =>{
                            console.log('请求成功了')
                            console.log(response.data.data.list)
                            this.actives = response.data.data.list
                            if(response.data.data.list.length == 0){
                                this.message = 0
                            }else{
                                this.message = 1
                            }
                        },
                        error =>{
                            alert("请求失败了",console.log(error))
                        }
                    )
                }else{
                    axios.get(`http://123.57.251.41:8080/admin-activity/allActivities?&company=${this.name}&pageNo=1&pageSize=5&state=${this.stateSelected}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                        response =>{
                            console.log('请求成功了')
                            console.log(response.data.data.list)
                            this.actives = response.data.data.list
                            if(response.data.data.list.length == 0){
                                this.message = 0
                            }else{
                                this.message = 1
                            }
                        },
                        error =>{
                            alert("请求失败了",console.log(error))
                        }
                    )
                }
            }else if(this.name == ''){
                axios.get(`http://123.57.251.41:8080/admin-activity/allActivities?classify=${this.typeSelected}&pageNo=1&pageSize=5&state=${this.stateSelected}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                    response =>{
                        console.log('请求成功了')
                        console.log(response.data.data.list)
                        this.actives = response.data.data.list
                        if(response.data.data.list.length == 0){
                            this.message = 0
                        }else{
                            this.message = 1
                        }
                    },
                    error =>{
                        alert("请求失败了",console.log(error))
                    }
                )
            }else{
                axios.get(`http://123.57.251.41:8080/admin-activity/allActivities?classify=${this.typeSelected}&company=${this.name}&pageNo=1&pageSize=5&state=${this.stateSelected}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                    response =>{
                        console.log('请求成功了')
                        console.log(response.data.data.list)
                        this.actives = response.data.data.list
                        if(response.data.data.list.length == 0){
                            this.message = 0
                        }else{
                            this.message = 1
                        }
                    },
                    error =>{
                        alert("请求失败了",console.log(error))
                    }
                )
            }
        },
        checkThis(a){
            if(this.ids.includes(a)){
                this.ids = this.ids.filter((id)=>{
                    if(id != a){
                        return id
                    }
                })
            }else{
                this.ids.unshift(a)
            }
        },
        deletechoose(){
            if(this.ids.length != 0){
                if(confirm('您确定要删除吗？')){
                    // ids.forEach(id => {
                    //     idarr += `&ids=${id}`
                    // });
                    axios.post(`http://123.57.251.41:8080/admin-activity/batchDelActivity?ids=${this.ids}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                        response =>{
                            console.log(response)
                            this.searchActives()
                        },
                        error =>{
                            console.log(id)
                            alert("删除失败了",console.log(error))
                        }
                    )
                }
            }
        }
    },
    mounted(){
        this.searchActives(1)
    }
}
</script>

// <style lang="less" scoped>
// .backstageMain{
//         grid-area: main;
//         padding: 45px;
//         color: rgb(100, 100, 100);
//         .header{
//             padding-bottom: 16px;
//             border-bottom: 1px solid #eee;
//             margin-top: 10px;
//             margin-bottom: 10px;
//             font-size: 32px;
//         }
//          .search{
//             width: 100%;
//             min-height: 50px;
//             padding: 5px;
//             // background-color: black;
//             .status{
//                 width: 120px;
//                 select{
//                     width: 70px;
//                     height: 30px;
//                     margin: 0 2px 0 8px;
//                     background-color: #fff;
//                     border-radius: 4px;
//                     border: 1px solid #dcdfe6;
//                     box-sizing: border-box;
//                     color: #606266;
//                     display: inline-block;
//                     font-size: inherit;
//                     outline: none;
//                 }
//             }
//             .worktype{
//                 width: 160px !important;
//             }
//             div{
//                 width: 225px;
//                 height: 40px;
//                 display: inline-block;
//                 margin-right: 10px;
//                 vertical-align: top;
//                 // margin-bottom: 22px;
//                 // background-color: yellow;
//                 label{
//                     width: 60px;
//                     height: 40px;
//                     font-size: 16px;
//                 }
//                 input{
//                     width: 145px;
//                     height: 30px;
//                     margin: 0 2px 0 8px;
//                     background-color: #fff;
//                     border-radius: 4px;
//                     border: 1px solid #dcdfe6;
//                     box-sizing: border-box;
//                     color: #606266;
//                     display: inline-block;
//                     font-size: inherit;
//                     outline: none;
//                     padding: 0 15px;
//                 }
//                 .harf{
//                     width: 70px !important;
//                 }
//             }
//             .buttons{
//                 width: 160px;
//                 height: 30px;
//                 margin: 0;
//                 // background-color: yellow;
//                 button{
//                     display: inline-block;
//                     line-height: 1;
//                     white-space: nowrap;
//                     cursor: pointer;
//                     background: #fff;
//                     border: 1px solid #dcdfe6;
//                     border-color: #dcdfe6;
//                     color: #606266;
//                     text-align: center;
//                     box-sizing: border-box;
//                     outline: none;
//                     margin: 0;
//                     font-weight: 400;
//                     padding: 7px 20px;
//                     font-size: 14px;
//                     border-radius: 4px;
//                 }
//                 button:hover{
//                     background: #46a6ff;
//                     border-color: #46a6ff;
//                     color: #fff;
//                 }
//                 .searchbtn{
//                     color: #fff;
//                     background-color: #1890ff;
//                     border-color: #1890ff;
//                     margin-right: 12px;
//                 }
//             }
//         }
//         .btn{
//             display: inline-block;
//             margin-bottom: 0;
//             font-weight: 400;
//             text-align: center;
//             white-space: nowrap;
//             vertical-align: middle;
//             cursor: pointer;
//             background-image: none;
//             border: 1px solid transparent;
//             padding: 6px 12px;
//             font-size: 14px;
//             border-radius: 4px;
//             color:snow;
//         }
//         .btn:focus{
//             outline: none;
//         }
//         .btn1{
//             color: #fff;
//             background-color: #5cb85c;
//             border-color: #4cae4c;
//         }
//         .btn1:link,.btn1:hover,.btn1:visited{
//             color: #fff;
//             background-color: #5cb85c;
//             border-color: #4cae4c;
//         }
//         .btn2{
//             display: inline-block;
//             margin-bottom: 0;
//             font-weight: 400;
//             text-align: center;
//             white-space: nowrap;
//             vertical-align: middle;
//             cursor: pointer;
//             background-image: none;
//             border: 1px solid transparent;
//             padding: 6px 12px;
//             font-size: 14px;
//             border-radius: 4px;
//             color:snow;
//             background-color: skyblue;
//         }
//         .control{
//             width: 100%;
//             height: 45px;
//             // background-color: black;
//             padding-top: 15px;
//             button{
//                 display: inline-block;
//                 line-height: 1;
//                 white-space: nowrap;
//                 cursor: pointer;
//                 border: 1px solid #dcdfe6;
//                 text-align: center;
//                 box-sizing: border-box;
//                 outline: none;
//                 margin: 0;
//                 font-weight: 400;
//                 padding: 7px 15px;
//                 font-size: 12px;
//                 border-radius: 3px;
//             }
//             .deleteall{
//                 color: #ff9292;
//                 background-color: #ffeded;
//                 border-color: #ffdbdb;
//                 margin-right: 15px;
//             }
//             .deleteall:hover{
//                 color: #ffeded;
//                 background-color: #ff9292;
//                 border-color: #ff9292;
//             }
//         }
//         .tablediv{
//             overflow-x: auto;
//             .sorry{
//                 width: 100%;
//                 height: 70px;
//                 font-size: 24px;
//                 text-align: center;
//                 margin-top: 80px;
//             }
//             .table{
//                 width: 100%;
//                 max-width: 100%;
//                 margin-bottom: 20px;
//                 margin-top: 20px;
//                 font-size: 16px;
//             }
//         }
//         .form-group{
//             margin-bottom: 15px;
//             label {
//                 display: inline-block;
//                 max-width: 100%;
//                 margin-bottom: 5px;
//                 font-weight: 700;
//             }
//             .form-control {
//                 display: block;
//                 width: 100%;
//                 height: 34px;
//                 padding: 6px 12px;
//                 font-size: 14px;
//                 color: #555;
//                 background-color: #fff;
//                 background-image: none;
//                 border: 1px solid #ccc;
//                 border-radius: 4px;
//             }
//         }
//     }
// </style>